import { Form, Input, Button, Checkbox, Card, message } from 'antd';
import { UserOutlined, LockOutlined, LoginOutlined } from '@ant-design/icons';
import { Link } from "react-router-dom"
import { SendReq } from "../vo/request"
import { LoginStateContext } from "../../router"
import "./login.less"
import { useContext } from 'react';
import { useState } from 'react';



export function LoginP() {
    const [flag, setFlag] = useState(false);
    const ifLoged = useContext(LoginStateContext);
    const [form] = Form.useForm();
    function sleep(time: number) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }
    const onFinished = async (values: any) => {
        let res = await SendReq(values);
        console.log(res)
        if (res.data) {
            message.success("登录成功！");
            sessionStorage.setItem("username",values.username);
            ifLoged.setState(true);
            sleep(1500).then(() => {
                window.location.replace("/index/start");
            });

        } else {
            setFlag(false);
            message.error("登录失败,请检查用户名或密码");
        }
    };

    return (
        <div className="login">
            <div className="loginCon">
                <Card>
                    <LoginOutlined style={{height:"3vw", fontSize:"25px"}} />
                    <Form
                        form={form}
                        name="normal_login"
                        initialValues={{ remember: true }}
                        onFinish={onFinished}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: ' ' }]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: ' ' }]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="密码"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>

                            {/* <Link to={"/index/login-id"}>
                                使用手机号码登录
                            </Link> */}
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="loginButton" 
                                loading={flag}
                                onClick={()=>{
                                    setFlag(true);
                                }}
                            >
                                登录
                            </Button>
                            <Link to={"/index/user/register"}>立即注册</Link>

                        </Form.Item>
                    </Form>
                </Card>

            </div>

        </div>

    );
};


